<template>
  <div class="user_ticket">
    <header>
      <el-button type="success" style="margin-bottom: 1rem;" @click.stop="grantShow = true">发放停车券</el-button>
    </header>

    <section>
      <el-table :data="tableData" height="100%" border>
      	<el-table-column label="停车时长" prop="parkingDuration" align="center"></el-table-column>
      	<el-table-column label="限领数量" align="center">
          <template slot-scope="scope">
            {{scope.row | rowTypeFilter}}
          </template>
        </el-table-column>
      	<el-table-column label="适用停车场(数量)" width="140" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" width="200">
              <span slot="reference" class="seePark">{{scope.row.parkNameList | parkListFilter}}</span>
              <p style="text-align: center;" v-for="item in scope.row.parkNameList">
                {{item}}
              </p>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            {{scope.row.type | typeFilter}}
          </template>
        </el-table-column>
      	<el-table-column label="发放数量" prop="quantity" align="center"></el-table-column>
      	<el-table-column label="领取数量" prop="receiveCount" align="center"></el-table-column>
      	<el-table-column label="剩余数量" prop="remainingQuantity" align="center"></el-table-column>
      	<el-table-column label="是否显示" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#46a6ff"
              inactive-color="#ccc"
              @change="switchStatus(scope.row)"
            />
          </template>
        </el-table-column>
      	<el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="receiveRecordShow = true,id=scope.row.id">领取记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :current-page="searchForm.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog title="停车券发放" :visible.sync="grantShow" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <grantUserTicket v-if="grantShow" @closeDialog="grantShow = false" @refresh="getTableData()" />
    </el-dialog>

    <el-dialog title="领取记录" :visible.sync="receiveRecordShow" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false">
      <receiveRecord v-if="receiveRecordShow" :id="id" @closeDialog="receiveRecordShow = false" @refresh="getTableData()" />
    </el-dialog>


  </div>
</template>

<script>
  import grantUserTicket from './grantUserTicket.vue'
  import receiveRecord from './receiveRecord.vue'

  export default {
    components: { grantUserTicket, receiveRecord },
    filters: {
      rowTypeFilter(row) {
        return row.type == 1 ? row.limitQuantityPerson : row.limitQuantityShopEveryDay;
      },
      typeFilter(type) {
        return type == 1 ? '用户' : '商户';
      },
      parkListFilter(list) {
        return list.length == 0 ? '全部' : list.length + '个';
      }
    },
    data() {
      return {
        grantShow: false,
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        tableData: [],
        total: 0,
        receiveRecordShow: false
      }
    },

    mounted() {
      this.getTableData();
    },

    methods: {
      getTableData() {
        this.$axios({
          method: 'get',
          url: '/platform/platform-ticket/page',
          params: this.searchForm
        }).then((res) => {
          if(res.code == 200) {
            res.data.records.forEach(item => {
              item.status = item.status == 1;
            })
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      },

      switchStatus(row) {
        let status = row.status == true ? '1' : '0';
        this.$axios({
          method: 'post',
          url: '/platform/platform-ticket/update-status',
          data: this.$qs.stringify({id: row.id, status: status})
        }).then((res) => {
          if(res.code == 200) {
            this.$message.success('修改展示状态成功')
          } else {
            this.$message.warning(res.desc)
          }
        })
      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        this.getTableData();
      }
    }
  }
</script>

<style scoped>
  .user_ticket {
    height: 100%;
  }

  header {
    height: 50px;
  }

  section {
    height: calc(100% - 100px);
  }

  footer {
    height: 50px;
  }

  .seePark:hover {
    cursor: pointer;
  }





</style>
